import { useEffect, useMemo, useState } from 'react';
import { isArray, Obj } from 'esy-ui';
import { Header, Img } from '@/components';
import { ssGetJsonItem, ssSetJsonItem } from '@/utils';
import suonaPng from '@/assets/images/common/suona.png';
import { useNavigation } from '@/hooks';

function NoticeDetail() {
  const [info, setInfo] = useState<Obj>({});
  const navigation = useNavigation();

  useEffect(() => {
    const data = ssGetJsonItem('notice-detail');
    if (data) {
      setInfo(data);
    }
    return () => {
      ssSetJsonItem('notice-detail', '');
    };
  }, []);

  // 媒体文件
  const medieList = useMemo(() => {
    let arr: Obj[] = [];
    if (info?.MediaJson) {
      arr = JSON.parse(info.MediaJson);
    }
    return arr;
  }, [info]);

  const toLink = (info: Obj) => {
    if (info.JumpUrl) navigation(info.JumpUrl);
  };

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title='text_207' />
      <div className='bg-white mx-4 my-2.5 p-3 rounded-xl'>
        <div className='flex items-center justify-between'>
          <Img boxClassName='w-8 h-8' src={suonaPng} />
          <div className='flex-1 ml-2.5 flex flex-col gap-1'>
            <div className='text-base'>{info?.Title}</div>
            <div className='text-xs text-bar'>{info?.InsertTime}</div>
          </div>
        </div>
        <div className='text-sm text-bdr leading-6 mt-2 pt-2 border-t border-solid'>{info?.Content}</div>
        {isArray(medieList)
          ? medieList.map((it, i) => {
              if (it.Url) {
                return (
                  <Img
                    boxClassName='w-full min-h-4 rounded overflow-hidden mt-2'
                    key={it.Id || i}
                    src={it.Url}
                    onClick={() => {
                      toLink(it);
                    }}
                  />
                );
              }
              return null;
            })
          : null}
      </div>
    </div>
  );
}

export default NoticeDetail;
